<template>
  <el-dialog
    title="添加记录"
    :visible.sync="isVisible"
    width="40%"
    class="dialog"
  >
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
        <el-input v-model="form.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="学号"
        :label-width="formLabelWidth"
        prop="studentNumber"
      >
        <el-input v-model="form.studentNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="学年"
        :label-width="formLabelWidth"
        prop="schoolYear"
      >
        <el-select v-model="form.schoolYear" placeholder="请选择">
          <el-option label="2017-2018年" value="2017-2018年"></el-option>
          <el-option label="2018-2019年" value="2018-2019年"></el-option>
          <el-option label="2019-2020年" value="2019-2020年"></el-option>
          <el-option label="2020-2021年" value="2020-2021年"></el-option>
          <el-option label="2021-2022年" value="2021-2022年"></el-option>
          <el-option label="2022-2023年" value="2022-2023年"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学期" :label-width="formLabelWidth" prop="semester">
        <el-select v-model="form.semester" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="综测记录名称"
        :label-width="formLabelWidth"
        prop="recordName"
      >
        <el-select v-model="form.recordName" placeholder="请选择">
          <el-option label="一周同行" value="一周同行"></el-option>
          <el-option label="ACM金牌" value="ACM金牌"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="记录类型"
        :label-width="formLabelWidth"
        prop="recordType"
      >
        <el-select v-model="form.recordType" placeholder="请选择">
          <el-option label="思想道德素质" value="思想道德素质"></el-option>
          <el-option label="专业学习测评" value="专业学习测评"></el-option>
          <el-option label="身心素质测评" value="身心素质测评"></el-option>
          <el-option label="能力发展测评" value="能力发展测评"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="证明材料"
        :label-width="formLabelWidth"
        prop="proveData"
      >
        <single-upload v-model="form.proveData"></single-upload>
      </el-form-item>
      <el-form-item
        label="备注信息"
        :label-width="formLabelWidth"
        prop="recordInfoNote"
      >
        <el-input v-model="form.recordInfoNote" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import SingleUpload from "@/components/upload/singleUpload";
export default {
  components: {
    SingleUpload,
  },
  data() {
    return {
      list: [],
      limit: 2,
      form: {
        studentNumber: "", //学号
        userName: "", //姓名
        recordName: "", //综测记录名称
        proveData: "", //证明材料地址
        recordType: "", //记录类型
        schoolYear: "", //学年
        semester: "", //学期
        recordInfoNote: "", //备注信息
      },
      formLabelWidth: "120px",
      isVisible: false,
      dialogImageUrl: "",
      imgVisible: false,
      rules: {
        studentNumber: [
          { required: true, message: "请输入学号", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请输入姓名", trigger: "change" },
        ],
        schoolYear: [
          { required: true, message: "请输入学年", trigger: "change" },
        ],
        semester: [
          { required: true, message: "请输入学期", trigger: "change" },
        ],
        recordName: [
          { required: true, message: "请输入综测记录名称", trigger: "change" },
        ],
        recordType: [
          { required: true, message: "请输入综测记录类型", trigger: "change" },
        ],
        proveData: [
          { required: true, message: "请输入综测材料地址", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    openDialog() {
      this.isVisible = true;
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form);
          setTimeout(() => {
            this.submit();
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submit() {
      this.$axios
        .post("/record/add", {
          studentNumber: this.form.studentNumber,
          userName: this.form.userName,
          recordName: this.form.recordName,
          proveData: this.form.proveData,
          recordType: this.form.recordType,
          schoolYear: this.form.schoolYear,
          semester: this.form.semester,
          recordInfoNote: this.form.recordInfoNote,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$emit("close");
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000,
              showClose: true,
            });
          }
        });
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 50%;
}
//让dialog出现在屏幕正中间
.dialog {
  /deep/.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 10px);
    max-width: calc(100% - 10px);
    height: 70% !important;
    font-size: 0.5rem;
  }
  /deep/.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
</style>